<template>
	<view class="status_bar">
		<view class="top">
			<view class="top_icon" @click="toPrevious"><u-icon name="arrow-left" color="#F45408" size="38"></u-icon></view>
			<image src="https://z3.ax1x.com/2021/07/20/WN9VBV.png"></image>
		</view>
		<view class="bg-set-m"></view>
		
		<view class="search">
			<u-search class="u-search" :clearabled="clearabled" bg-color="#000000" border-color="#666666" :focus="true" :show-action="false" placeholder="输入项目关键词进行搜索" v-model="keyword" search-icon-color="#666666" height="80" margin="0 40rpx 0 40rpx" color="#F45408" @search="setSearch(keyword)" @clear="clearClick">
			  </u-search>
		</view>
		<view class="content">
			<view v-if="isSearch">
				<view v-if="isSearchNull" class="content_isSearchNull">
					<image src="https://case.lclook.com/profile/upload/quesheng.png"></image>
				</view>
				<view v-else class="content_isSearch">
					<view class="content_isSearch_online" v-if="list.online.length > 0">
						<view class="content_isSearch_text">线上项目</view>
						<view class="content_isSearch_online_box">
							<scroll-view class="scroll-view_H" scroll-x="true">
								<view class="scroll-view-item_H" v-for="(item,index) in list.online" :class="index == (list.online.length-1) ? ' mr_40' : ''">
									<image :src="item.image" @click="goCaseDetails(item)"></image>
									<view class="scroll-view-item_H_theme"><rich-text :nodes="replaceTitle(item.title)"></rich-text></view>
									<view class="scroll-view-item_H_text">{{item.intro}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- <view class="content_isSearch_offline" v-if="list.offline.length > 0">
						<view class="content_isSearch_text">线下项目</view>
						<view class="content_isSearch_offline_box">
							<scroll-view class="scroll-view_H" scroll-x="true">
								<view class="scroll-view-item_H_offline" v-for="(item,index) in list.offline" :class="index == (list.offline.length-1) ? ' mr_40' : ''">
									<image :src="item.ImgSrc"></image>
									<view class="scroll-view-item_H_theme"><rich-text :nodes="replaceTitle(item.title)"></rich-text></view>
									<view class="scroll-view-item_H_text">{{item.intro}}</view>
								</view>
							</scroll-view>
						</view>
					</view> -->
<!-- 					<view class="content_isSearch_product" v-if="list.video.length > 0">
						<view class="content_isSearch_text">产品视频</view>
						<view class="content_isSearch_product_box">
							<scroll-view class="scroll-view_H" scroll-x="true">
								<view class="scroll-view-item_H_product" v-for="(item,index) in list.video" :class="index == (list.video.length-1) ? ' mr_40' : ''">
									<video :id="'myVideo'+index" :src="item.video"></video>									
									<view class="scroll-view-item_H_theme"><rich-text :nodes="replaceTitle(item.title)"></rich-text></view>
									<view class="scroll-view-item_H_text">{{item.intro}}</view>
								</view>
							</scroll-view>
						</view>
					</view> -->
					
					
				</view>
				
			</view>
			<view v-else>
				<view class="history">搜索历史
					<view class="history_img" @click="clearHistory">
						<image src="https://z3.ax1x.com/2021/07/21/Wd2eEV.png"></image></view>
				</view>
				<view v-if="searchList && searchList.length >=1 " class="history_record">
					<view  class="history_record_text" v-for="item in searchList" @click="setSearch(item, 200)">{{item}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="bg-set-low"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				clearabled: true,
				playBtnShowIndex: -1,
				playBtnShow:true,
				// isSearchNull: true,
				isSearchNull: true,
				isSearch: false,
				// isSearch: false,
				searchList: [],
				keyword: '',
				productList: [],
				offLineList: [],
				contentList:[]
			}
		},
		onLoad() {
			// this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let searchValueInit = uni.getStorageSync("search_key")
				this.searchList = searchValueInit.split('-')
				// this.searchList.reverse()
				if(this.searchList.length == 1){
					this.searchList = []
				}
				console.log(this.searchList)
				console.log(this.searchList.length)
			},
			toPrevious() {
				console.log("点击")
				uni.navigateBack()
			},
			setSearch(keyword, index) {
				console.log("搜索参数", keyword)
				if(keyword == '' || keyword == null){
					uni.showToast({
						icon: "none",
						title: "不能为空"
					})
					return
				}
				this.keyword = keyword
				this.isSearch = true
				this.$api.search({
					data:{
						title: keyword
					},
				}).then(res => {
					console.log(res)
					this.list = res.data
					// this.list.online.replace(keyword, "<font style='color: #24BAD1'>${keyword}</font>")
					let _l = res.data
					if(_l.offline.length == 0 && _l.online.length == 0 && _l.video.length == 0){
						this.isSearchNull = true
					}else{
						this.isSearchNull = false
					}
				})
				if(index > 0){
					
				}else{
					let searchValue = this.searchList
					// searchValue.push(keyword)
					searchValue.unshift(keyword)
					let newString = searchValue.join('-')
					uni.setStorage({
						key: 'search_key',
						data: newString
					})
				}
				
			},
			clearHistory() {
				uni.showModal({
					title: "警告",
					content: "是否清空搜索历史？",
					cancelText: "点错了",
					confirmText: "清空",
					confirmColor: "#ea1a1a",
					success: (res) => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'search_key',
								success: (res) => {
									this.searchList = []
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			playVideo(index) {
				/* 播放前关闭前一个 */
				let videoPrevious = uni.createVideoContext('myVideo' + this.playBtnShowIndex)
				videoPrevious.pause()
				
				this.playBtnShow = false
				this.playBtnShowIndex = index
				console.log("this.playBtnShowIndex", this.playBtnShowIndex)
				let video_ = uni.createVideoContext('myVideo'+index)
				console.log("video_", video_)
				video_.play()
			},
			clearClick() {
				this.isSearch = false
			},
			replaceTitle(value) {
				// console.log(value)
				// let _ = 
				let keyword = this.keyword
				return value.replace(keyword, `<font style='color: #F45408'>${keyword}</font>`)
			},
			goCaseDetails(item) {
				console.log("item", item)
				if(typeof(item) == "string" && item.indexOf("http") != -1){
					uni.navigateTo({
						url: '../caseDetails/caseDetails?item=' + item + '&isUrl=ture'
					})
				}else if(item != null){
					item = encodeURI(JSON.stringify(item))
					uni.navigateTo({
						url: '../caseDetails/caseDetails?item=' + item
					})
				}else{
					uni.showToast({
						icon: "none",
						title: "暂无详情"
					})
				}
			},
			
			
		}
	}
</script>

<style>
	.status_bar{
		margin: 0;
		background-color: #000000;
	}
	.top{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 198rpx;
		padding-top: 88rpx;
		padding-bottom: 24rpx;
		background: linear-gradient(#503122, #000000);
		z-index: 10;
	}
	.top image{
		width: 144rpx;
		height: 72rpx;
		margin-left: 318rpx;
	}
	.top_icon{
		width: 76rpx;
		height: 76rpx;
		position: fixed;
		top: 104rpx;
		left: 38rpx;
	}
	.search{
/* 		position: fixed;
		top: 198rpx; */
		margin-top: 198rpx;
		width: 750rpx;
		height: 80rpx;
		background-color: #000000;
	}
	.u-search{
		width: 670rpx;
		height: 80rpx;
	}
	/deep/ .uni-input-form{
		font-size: 30rpx;
		line-height: 80rpx;
	}
	.bg-set-low{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 264rpx;
		z-index: -1;
		background: linear-gradient(#000000, #2f1002);
	}
	.bg-set-m{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 100vh;
		background-color: #000000;
		z-index: -1;
	}
	.content{
		/* margin-top: 278rpx; */
		/* padding-top: 278rpx; */
		width: 750rpx;
		/* height: 100rpx; */
	}
	.history{
		/* width: 750rpx; */
		font-size: 30rpx;
		line-height: 40rpx;
		opacity: 0.72;
		margin: 32rpx 0 0 40rpx;
		color: #FFFFFF;
		/* text-align: right; */
		
	}
	.history_img{
	}
	.history image{
		position: relative;
		left: 622rpx;
		top: -40rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.history_record{
		position: relative;
		top: -48rpx;
		margin: 4rpx 16rpx 0 40rpx;
		color: #B8B8B8;
	}
	.history_record_text{
		display: inline-block;
		border-radius: 8rpx;
		height: 54rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		padding: 10rpx 16rpx;
		background-color: rgba(184, 184, 184, 0.24);
		margin: 20rpx 24rpx 0 0;
	}
	.content_isSearchNull{
		margin: 108rpx 104rpx 0 106rpx; 
	}
	.content_isSearchNull image{
		width: 540rpx;
		height: 540rpx;
	}
	.content_isSearch{
		/* padding-top: 40rpx; */
	}
	.content_isSearch_text{
		margin-top: 40rpx;
		color: #FFFFFF;
		opacity: 0.72;
		margin-left: 40rpx;
		font-size: 30rpx;
		line-height: 42rpx;
	}
	.content_isSearch_online_box{}
	/* 线上*/
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-left: 16rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 288rpx;
		margin: 24rpx 0 0 24rpx;
	}
	.scroll-view-item_H image{
		width: 288rpx;
		height: 288rpx;
	}
	.scroll-view-item_H_theme{
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.scroll-view-item_H_text{
		margin-bottom: 24rpx;
		margin-top: 4rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		opacity: 0.48;
	}
	.mr_40{
		margin-right: 40rpx !important;
	}
	/* 线下 */
	.content_isSearch_offline_box{}
	.scroll-view-item_H_offline{
		display: inline-block;
		width: 288rpx;
		margin: 24rpx 0 0 24rpx;
	}
	.scroll-view-item_H_offline image{
		width: 288rpx;
		height: 212rpx;
	}
	/* 产品视频 */
	.content_isSearch_product{}
	.content_isSearch_product_box{}
	.scroll-view-item_H_product{
		position: relative;
		display: inline-block;
		width: 660rpx;
		margin: 24rpx 0 0 24rpx;
	}
	.scroll-view-item_H_product video{
		width: 660rpx;
		height: 348rpx;
		object-fit: fill;
	}
/* 	/deep/ .uni-video-cover-duration{
		display: none !important;
	}
	/deep/ .uni-video-cover-play-button{
		background-image: url("https://z3.ax1x.com/2021/07/22/WBdTBT.png") !important;;
		background-size: 200% !important;
	} */
	.video_play_icon{
		position: relative;
		bottom: 50rpx;
		right: 454rpx;
		width: 248rpx;
		height: 248rpx;
		z-index: 2;
	}
	
</style>
